<template>
  <div class="page1">
    <div class="box">
      <div class="dolg">
        <div class="smalldolg">
          <h3>尊敬的<span>{{data.userName.length>15 ? data.userName.substring(0,14)+"..." : data.userName}}</span></h3>
          <p><span>{{data.createDate.split("-")[0]}}</span>年<span>{{data.createDate.split("-")[1]}}</span>月<span>{{data.createDate.split("-")[2]}}</span>日</p>
          <p>您第一次登录智慧通用，</p>
          <p>累计访问<span>{{data.viewCount ? data.viewCount :0}}</span>次，</p>
          <p>使用时间超过<span>{{data.onlineTimeCount ? data.onlineTimeCount:0}}</span>小时。</p>
        </div>
      </div>
      <div class="people animate__fadeInBottomRight"><img class="img1" src="../../assets/images/bill2022/1/people.png" alt=""></div>
    </div>
    <div class="surface">
      <div class="surface_content fadeInDown">
         <img src="../../assets/images/bill2022/1/size.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'page1',
  props: {
    data: {
      type: Object,
      default: () => { },
    },
  },
  components: {
  },
  // 定义属性
  data () {
    return {
        userName:'您第一次登录智慧通用，您第一次登录智慧通用，您第一次登录智慧通用，'
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
  </script>
  <style lang='less' scoped>
.page1 {
  .box {
    position: relative;
    z-index: 9999;
    .dolg {
      width: 30.375rem;
      height: 32.6875rem;
      background: url("../../assets/images/bill2022/1/frame.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 6.25rem;
      margin-left: 4.25rem;
      padding: 3rem 0.4rem;
      text-align: left;
    //   transform: skewX(3deg);
      // transform: rotate(-1deg);
      .smalldolg{
    //  transform: skewX(3deg);
      }
      h3 {
        margin-left: 3rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: #2d2a82;
        font-size: 2.5rem;
        font-weight: 400;
        padding-right: 1rem;
        letter-spacing: 0.1rem;
        font-family: PingFang SC, PingFang SC-Regular;
        span {
          color: #e66f3a;
          font-weight: bold;
        }
      }
      p {
        margin-top: 1rem;
        margin-left: 3rem;
        font-size: 2.25rem;
        line-height: 1.3;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        
        color: #2d2a82;

        span {
          font-weight: bold;
          color: #e66f3a;
        }
      }
    }
    .people {
      width: 15.25rem;
      height: 26.75;
      position: absolute;
      top: 16rem;
      right: 2rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .img1 {
        animation: slideUp 1s ease-in-out;
    -webkit-animation:slideUp 1s ease-in-out;
    -moz-animation: slideUp 1s ease-in-out;/*gecko内核的浏览器（如 Firefox）*/
	-o-animation: slideUp 1s ease-in-out;/*Opera 浏览器*/
	-ms-animation: slideUp 1s ease-in-out;/*IE8+*/
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    @keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }

    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-webkit-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }

  @-moz-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-o-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-ms-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  }
  .surface {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 36.8125rem;
    background: url("../../assets/images/bill2022/1/surface.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .surface_content {
      width: 27.1875rem;
      text-align: center;
      font-size: 2.3rem;
      font-family: HYk2gj, HYk2gj-Regular;
      font-weight: bold;
      line-height: 4rem;
      text-align: center;
      color: #ffffff;
      letter-spacing: -0.1px;

    }
  }
}
.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInBottomRight {
  animation: fadeInBottomRight 2s ease-in-out;
  animation-iteration-count: 1;
}
</style>